<template>
    <div class="category">
        <!-- 搜索框 -->
        <van-search @click="$router.push({path:'/home/search'})" v-model="value" shape="round" placeholder="请输入搜索关键词" />
        <!-- 下方内容 -->
        <div class="bottom">
            <van-sidebar v-model="activeKey">
                <van-sidebar-item :title="item.name" v-for="item in categoryList" :key="item.id"
                    @click="onChange(item.id)" />

            </van-sidebar>
            <!-- 右边盒子 -->
            <div class="right">
                <span>
                    <img :src="currentCategory.banner_url" alt="" />
                    <p class="box">{{ currentCategory.front_desc }}</p>
                </span>


                <h3>-{{ currentCategory.name }}-</h3>
                <van-grid :column-num="3">
                    <van-grid-item v-for="item in currentCategory.subCategoryList" :key="item.id"
                        :icon="item.wap_banner_url" :text="item.name" />
                </van-grid>
            </div>
        </div>
    </div>
</template>
<script>
import { getCategoryData, getCurrentCategory } from '@/utils/http'
export default {
    name: 'Category',
    data() {
        return {
            value: '', //搜索关键字
            activeKey: 0, //默认的导航索引
            categoryList: [],//左侧导航
            currentCategory: {}, //当前分类
        }
    },
    components: {
    },
    watch: {},
    methods: {
        getData() {
            getCategoryData()
                .then((res) => {
                    console.log(res);
                    this.categoryList = res.data.data.categoryList;
                    this.currentCategory = res.data.data.currentCategory
                })
        },


        onChange(id) {
            //切换左边导航栏
            // this.activeKey = index
            console.log(id);
            getCurrentCategory({ id: id }).then((res) => {
                this.currentCategory = res.data.data.currentCategory
            }).catch((e) => {
                
            });
        },



    },

    created() {
        this.getData()
    },
};
</script>
<style scoped lang="less">
.bottom {
    display: flex;
}

.right {
    flex: 1;

    img {
        width: 100%;
        display: block;
    }

    h3 {
        text-align: center;
    }

    span {
        position: relative;
    }
}

.box {
    top: 37.5px;
    left: 73.5px;
    position: absolute;
    font-size: 18px;
    text-align: center;
}
</style>